<template>
	
	<view class="pages-container">
		<view class="loading" v-if="loading">
			<view class="avatar"></view>
			<view class="loader">
			</view>
		</view>
		<view class="header">
			<slot name="header"></slot>
		</view>
		<view class="container">
			<slot></slot>
		</view>
		<view class="footer">
			<slot name="footer"></slot>
		</view>
	</view>
	
<!-- 	<view class="exemption">

		
	</view> -->
</template>

<script setup>
	defineProps({
		loading: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss">
	.loading {
		position: fixed;
		width: 100%;
		height: 100%;
		background: #f4f6fa;
		z-index: 99999999;

		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.loader {
			border: 6rpx solid #fff;
			border-top: 6rpx solid #f00;
			border-radius: 50%;
			width: 90rpx;
			height: 90rpx;
			animation: spin 2s linear infinite;
			position: absolute;
			left: calc(50% - 50rpx);
			top: calc(50% - 50rpx);
		}

		.avatar {
			background: url('');
			width: 80rpx;
			height: 80rpx;
			background-size: cover;
			background-color: #f00;
			border-radius: 50%;
			position: absolute;
			left: calc(50% - 40rpx);
			top: calc(50% - 40rpx);
		}
	}

	.pages-container {
		width: 100%;
		overflow: hidden;
	}

	.exemption {
		font-size: 24rpx;
		color: #666;
		padding: 30rpx;
		background: #eee;
		margin-top: 40rpx;
	}
</style>